<template>
	<view class="container">
		<!-- 筛选区 -->
		<view class="filter-section">
			<view class="filter-item">
				<input 
					type="number" 
					v-model="taskId"
					placeholder="请输入任务编号"
					@input="onFilterChange"
				/>
			</view>
			<view class="filter-item">
				<input 
					type="number" 
					v-model="itemId"
					placeholder="请输入物品编号"
					@input="onFilterChange"
				/>
			</view>
			<view class="filter-item">
				<input 
					type="text" 
					v-model="applicant"
					placeholder="请输入申请人"
					@input="onFilterChange"
				/>
			</view>
		</view>

		<!-- 列表区域 -->
		<scroll-view 
			scroll-y 
			class="request-list"
			@scrolltolower="loadMore"
			refresher-enabled
			@refresherrefresh="onRefresh"
			:refresher-triggered="isRefreshing"
		>
			<view 
				class="request-card"
				v-for="request in requestList" 
				:key="request.usageId"
				@tap="goToApprove(request)"
			>
				<view class="request-header">
					<text class="request-id">#{{request.usageId}}</text>
					<text :class="['request-status', request.status]">{{getStatusText(request.status)}}</text>
				</view>
				
				<view class="request-info">
					<view class="info-row">
						<text class="label">申请人：</text>
						<text class="value">{{request.applicantId}}</text>
					</view>
					<view class="info-row">
						<text class="label">物品id：</text>
						<text class="value">{{request.itemId}}</text>
					</view>
					<view class="info-row">
						<text class="label">任务编号：</text>
						<text class="value">{{request.taskId}}</text>
					</view>
					<view class="info-row">
						<text class="label">借用目的：</text>
						<text class="value">{{request.purpose}}</text>
					</view>
					<view class="info-row">
						<text class="label">预期归还时间：</text>
						<text class="value">{{formatDate(request.expectedReturnDate)}}</text>
					</view>
				</view>
			</view>
			
			<view class="loading" v-if="loading">加载中...</view>
			<view class="no-more" v-if="noMore">没有更多数据了</view>
			<view class="empty" v-if="requestList.length === 0 && !loading">
				暂无审批申请
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskId: '', // 任务编号
				itemId: '', // 物品编号
				applicant: '', // 申请人
				requestList: [],
				page: 1,
				loading: false,
				noMore: false,
				isRefreshing: false,
				filterTimer: null,
				statusMapping: {
					0: '待审批',
					1: '已批准',
					2: '已拒绝',
					3: '已归还',
					4: '部分归还',
					5: '超期未还',
					6: '损坏'
				}
			}
		},
		onLoad() {
			this.loadRequests(true)
		},
		methods: {
			onFilterChange() {
				// 防抖处理
				if (this.filterTimer) {
					clearTimeout(this.filterTimer)
				}
				this.filterTimer = setTimeout(() => {
					this.loadRequests(true)
				}, 500)
			},
			getStatusText(status) {
				return this.statusMapping[status] || '未知状态'
			},
			formatDate(date) {
				if (!date) return ''
				const d = new Date(date)
				return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
			},
			async loadRequests(reset = false) {
				// 避免重复请求
				if (this.loading) return
				
				// 重置页面
				if (reset) {
					this.page = 1
					this.noMore = false
					this.requestList = []
				}
				
				// 如果已经没有更多数据且不是重置，则直接返回
				if (this.noMore && !reset) return

				this.loading = true

				try {
					const params = {
						pageNum: this.page,
						taskId: this.taskId || null,
						itemId: this.itemId || null,
						applicant: this.applicant || null,
						status: 0
					}

					const token = uni.getStorageSync('satoken')
					const res = await uni.request({
						url: this.$baseUrl + '/item/getAllRequests',
						method: 'POST',
						data: params,
						header: {
							'satoken': token
						}
					})
					
					console.log(res)
					const { data } = res
					if (data.code === 200) {
						const list = data.data.list || []
						
						this.requestList = reset ? list : [...this.requestList, ...list]
						this.noMore = list.length < 10
						
						if (!this.noMore) {
							this.page++
						}
					} else {
						uni.showToast({
							title: data.message || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('请求失败：', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					if (this.isRefreshing) {
						this.isRefreshing = false
					}
				}
			},
			loadMore() {
				console.log(122)
				// this.page++
				this.loadRequests()
			},
			onRefresh() {
				this.isRefreshing = true
				this.loadRequests(true)
			},
			goToApprove(request) {
				uni.navigateTo({
					url: `/pages/items/ApproveItem?usageId=${request.usageId}&itemId=${request.itemId}`
				})
			}

		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding: 20rpx;
}

.filter-section {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
	
	.filter-item {
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		input {
			width: 100%;
			height: 80rpx;
			background-color: #f8f8f8;
			border-radius: 40rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
		}
	}
}

.request-list {
	height: calc(100vh - 320rpx);
}

.request-card {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
	
	.request-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		.request-id {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.request-status {
			padding: 4rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			
			&.0 {
				background-color: #FFF3E0;
				color: #FF9800;
			}
			
			&.1 {
				background-color: #E8F5E9;
				color: #4CAF50;
			}
			
			&.2 {
				background-color: #FFEBEE;
				color: #F44336;
			}
			
			&.3 {
				background-color: #E3F2FD;
				color: #2196F3;
			}
			
			&.4 {
				background-color: #F3E5F5;
				color: #9C27B0;
			}
			
			&.5 {
				background-color: #FBE9E7;
				color: #FF5722;
			}
			
			&.6 {
				background-color: #EFEBE9;
				color: #795548;
			}
		}
	}
	
	.request-info {
		.info-row {
			display: flex;
			margin-bottom: 12rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.label {
				width: 200rpx;
				color: #666;
				font-size: 28rpx;
			}
			
			.value {
				flex: 1;
				color: #333;
				font-size: 28rpx;
			}
		}
	}
}

.loading,
.no-more,
.empty {
	text-align: center;
	padding: 30rpx;
	color: #999;
	font-size: 28rpx;
}

.empty {
	margin-top: 200rpx;
}
</style> 